import dayjs from 'dayjs';
import {
    fetchPressureDetail
} from '../../../../services/device';
const deepEqual = (a, b) => {
    if (a === b) return true;
    if (typeof a !== 'object' || typeof b !== 'object' || !a || !b) return false;
    const keysA = Object.keys(a),
        keysB = Object.keys(b);
    if (keysA.length !== keysB.length) return false;
    return keysA.every(key => keysB.includes(key) && deepEqual(a[key], b[key]));
};
const infoMappings = {
    '测量次数': 'measure_num',
    '异常测量次数': 'abnormal_num',
    '收缩压范围': 'sbp_radius',
    '收缩压平均值': 'sbp_avg',
    '舒张压范围': 'dbp_radius',
    '舒张压平均值': 'dbp_avg',
    '脉搏范围': 'pulse_radius',
    '脉搏平均值': 'pulse_avg'
}
Component({
    properties: {
        params: {
            type: Object,
            value: null,
            observer(newConfig, oldConfig) {
                if (!deepEqual(newConfig, oldConfig)) {
                    this.setData({
                        ...newConfig
                    }, () => {
                        this.searchDetail()
                    })
                }
            }
        }
    },
    data: {
        device_imei: null,
        first_config: {},
        second_config: {},
        infos: [{
            nodes: '',
            title: '测量次数'
        }, {
            nodes: '',
            title: '异常测量次数'
        }, {
            nodes: '',
            title: '收缩压范围'
        }, {
            nodes: '',
            title: '收缩压平均值'
        }, {
            nodes: '',
            title: '舒张压范围'
        }, {
            nodes: '',
            title: '舒张压平均值'
        }, {
            nodes: '',
            title: '脉搏范围'
        }, {
            nodes: '',
            title: '脉搏平均值'
        }]
    },
    methods: {
        async searchDetail() {
            const {
                stime,
                otime,
                device_imei,
                user_tag
            } = this.data;
            const params = {
                stime,
                otime,
                device_imei,
                user_tag
            };
            if (!stime || !device_imei || !user_tag) return;
            if (this.data.currentIndex == 0) {
                delete params.otime;
            }
            const res = await fetchPressureDetail({
                ...params
            });
            switch (this.data.currentIndex) {
                case 0:
                    this.renderDayChart(res.data);
                    break;
                case 1:
                    this.renderWeekChart(res.data);
                    break;
                case 2:
                    this.renderMonthChart(res.data);
                    break;
                default:
                    break;
            }
            let {
                blood_pressure_obj
            } = res.data;

            let third_config = {
                tooltip: {
                    trigger: 'item',
                    textStyle: {
                        align: 'left',
                        textShadowBlur: 10, // 重点
                        textShadowColor: 'transparent', // 重点
                    },
                },
                legend: {
                    top: 0
                },
                grid: {
                    bottom: 0,
                    containLabel: true
                },
                legend: {
                    orient: 'horizontal',
                    top: 'top'
                },
                series: [{
                    type: 'pie',
                    radius: ['30%', '55%'],
                    center: ['50%', '60%'],
                    avoidLabelOverlap: false,
                    labelLine: {
                        show: true
                    },
                    data: [{
                        value: blood_pressure_obj.normal_num,
                        name: '正常',
                        itemStyle: {
                            color: '#73C0DE',
                            borderRadius: 5
                        }
                    }, {
                        value: blood_pressure_obj.abnormal_num,
                        name: '异常',
                        itemStyle: {
                            color: '#EE6666',
                            borderRadius: 5
                        }
                    }]
                }]
            }
            let infos = this.data.infos;
            infos.forEach(item => {
                switch (item.title) {
                    case '测量次数':
                        item.nodes = `<font>${blood_pressure_obj[infoMappings[item.title]]}次</font>`
                        break;
                    case '异常测量次数':
                        item.nodes = `<font>${ blood_pressure_obj[infoMappings[item.title]] }次</font>`
                        break;
                    case '收缩压范围':
                        item.nodes = `<font>${ blood_pressure_obj[infoMappings[item.title]] }mmHg</font>`
                        break;
                    case '收缩压平均值':
                        item.nodes = `<font>${ blood_pressure_obj[infoMappings[item.title]] }mmHg</font>`
                        break;
                    case '舒张压范围':
                        item.nodes = `<font>${ blood_pressure_obj[infoMappings[item.title]] }mmHg</font>`
                        break;
                    case '舒张压平均值':
                        item.nodes = `<font>${ blood_pressure_obj[infoMappings[item.title]] }mmHg</font>`
                        break;
                    case '脉搏范围':
                        item.nodes = `<font>${ blood_pressure_obj[infoMappings[item.title]] }次/分钟</font>`
                        break;
                    case '脉搏平均值':
                        item.nodes = `<font>${ blood_pressure_obj[infoMappings[item.title]] }次/分钟</font>`
                        break;
                    default:
                        break;
                }
            })
            this.setData({
                third_config,
                infos,
                text: this.renderText(blood_pressure_obj)
            })
        },
        renderText({
            normal_num,
            abnormal_num,
            measure_num,
            sbp_radius,
            dbp_radius
        }) {
            let period = this.data.currentIndex === 0 ? '日' : this.data.currentIndex === 1 ? '周' : this.data.currentIndex === 2 ? '月' : '';
        
            // 如果测量次数少于5次
            if (measure_num < 5) {
                return '您最近的血压数据不足，无法为您提供血压异常分析服务。测量次数达到5次以上即可查看分析解读。';
            }
        
            // 基础消息内容
            let message = `本${period}您测量了${measure_num}次血压，其中正常${normal_num}次，异常${abnormal_num}次。` +
                          `收缩压最高异常血压${sbp_radius.split('-')[0]}mmHg，舒张压最高异常血压${dbp_radius.split('-')[0]}mmHg，`;
        
            // 判断无异常情况
            if (abnormal_num === 0) {
                return message + '根据数据显示您的血压正常，请保持良好的生活习惯，并持续观察血压。';
            }
        
            // 判断异常次数占比
            const abnormalRatio = abnormal_num / measure_num;
        
            if (abnormalRatio < 0.5) {
                // 异常次数占比小于等于50%
                return message + '根据数据显示您的血压存在异常，请坚持合理饮食、注意休息、适当锻炼，并持续观察血压变化。';
            } else {
                // 异常次数占比大于50%
                return message + '根据数据显示您的血压存在异常，建议您平时清淡饮食、少食多餐，每周运动3-5次，每次1小时左右，可选择步行、慢跑、骑车、球类、太极拳等，并持续观察血压变化。';
            }
        },
        renderDayChart({
            list
        }) {
            let first_config = {
                tooltip: {
                    show: true,
                    confine: true,
                    trigger: 'axis',
                    textStyle: {
                        align: 'left',
                        textShadowBlur: 10, // 重点
                        textShadowColor: 'transparent', // 重点
                    },
                },
                legend: {
                    show: true,
                },
                title: {
                    subtext: 'mmHg',
                    subtextStyle: {
                        height: 100,
                        lineHeight: 20
                    },
                },
                xAxis: {
                    type: 'category',
                    data: list.map(item => {
                        return dayjs(item.measuring_time).format('HH:mm')
                    })
                },
                yAxis: {
                    type: 'value',
                    nameGap: 10,
                    splitLine: {
                        lineStyle: {
                            type: 'dashed'
                        },
                        show: true
                    }
                },
                graphic: {
                    invisible: list.length ? true : false,
                    left: 'center',
                    silent: true,
                    style: {
                        fill: 'black',
                        fontSize: '20px',
                        fontWeight: 'normal',
                        text: '暂无数据'
                    },
                    top: 'middle',
                    type: 'text'
                },
                grid: {
                    bottom: 10,
                    left: 10,
                    right: 10,
                    top: '20%',
                    show: false,
                    containLabel: true
                },
                series: [{
                    name: '舒张压',
                    type: 'line',
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                    offset: 0,
                                    color: 'rgba(50, 149, 247, .5)' // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(255, 255, 255)' // 100% 处的颜色
                                }
                            ],
                            global: false // 缺省为 false
                        }
                    },
                    data: list.map(t => {
                        return {
                            value: Number(t.dbp)
                        }
                    })
                }, {
                    name: '收缩压',
                    type: 'line',
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                    offset: 0,
                                    color: 'rgba(120, 205, 69, .5)' // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(255, 255, 255)' // 100% 处的颜色
                                }
                            ],
                            global: false // 缺省为 false
                        }
                    },
                    data: list.map(t => {
                        return Number(t.sbp)
                    })
                }]
            }
            let second_config = {
                tooltip: {
                    show: true,
                    confine: true,
                    trigger: 'axis',
                    textStyle: {
                        align: 'left',
                        textShadowBlur: 10, // 重点
                        textShadowColor: 'transparent', // 重点
                    },
                },
                title: {
                    subtext: '次/分钟',
                    subtextStyle: {
                        height: 100,
                        lineHeight: 20
                    },
                },
                legend: {
                    show: true,
                },
                xAxis: {
                    type: 'category',
                    data: list.map(item => {
                        return dayjs(item.measuring_time).format('HH:mm')
                    })
                },
                yAxis: {
                    type: 'value',
                    nameGap: 10,
                    splitLine: {
                        lineStyle: {
                            type: 'dashed'
                        },
                        show: true
                    }
                },
                graphic: {
                    invisible: list.length ? true : false,
                    left: 'center',
                    silent: true,
                    style: {
                        fill: 'black',
                        fontSize: '20px',
                        fontWeight: 'normal',
                        text: '暂无数据'
                    },
                    top: 'middle',
                    type: 'text'
                },
                grid: {
                    bottom: 10,
                    left: 10,
                    right: 10,
                    top: '20%',
                    show: false,
                    containLabel: true
                },
                series: [{
                    name: '脉搏',
                    data: list.map(item => {
                        return item.pulse
                    }),
                    label: {
                        show: true,
                        position: 'top'
                    },
                    type: 'line',
                    lineStyle: {
                        color: '#EF713A'
                    },
                    itemStyle: {
                        color: '#EF713A'
                    },
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                    offset: 0,
                                    color: 'rgba(239, 113, 58, 1)' // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(255, 255, 255)' // 100% 处的颜色
                                }
                            ],
                            global: false // 缺省为 false
                        }
                    },
                }]
            }
            this.setData({
                first_config,
                second_config
            })
        },
        renderWeekChart({
            list
        }) {
            let dbp_min = [], dbp_max = [], sbp_min = [], sbp_max = [], pulse_min = [], pulse_max = [];
            list.forEach(item => {
                item.dbp_min = item.dbp_min || 0;
                item.dbp_max = item.dbp_max || 0;
                item.sbp_min = item.sbp_min || 0;
                item.sbp_max = item.sbp_max || 0;
                item.pulse_min = item.pulse_min || 0;
                item.pulse_max = item.pulse_max || 0;
                dbp_min.push(item.dbp_min);
                dbp_max.push(item.dbp_max - item.dbp_min);
                sbp_min.push(item.sbp_min - item.dbp_max);
                sbp_max.push(item.sbp_max - item.sbp_min);
                pulse_min.push(item.pulse_min);
                pulse_max.push(item.pulse_max - item.pulse_min);
            })
            let first_config = {
                graphic: {
                    invisible: list.length ? true : false,
                    left: 'center',
                    silent: true,
                    style: {
                        fill: 'black',
                        fontSize: '20px',
                        fontWeight: 'normal',
                        text: '暂无数据'
                    },
                    top: 'middle',
                    type: 'text'
                },
                grid: {
                    bottom: 10,
                    left: 10,
                    right: 10,
                    top: '20%',
                    show: false,
                    containLabel: true
                },
                tooltip: {
                    show: true,
                    confine: true,
                    trigger: 'axis',
                    formatter: function (params) {
                        return params[0].axisValue + '\n' + params[1].seriesName + '：' + (params[0].value || 0) + '~' + ((params[0].value + params[1].value) || 0) + '\n' + params[3].seriesName + '：' + ((params[0].value + params[1].value + params[2].value) || 0) + '~' + ((params[0].value + params[1].value + params[2].value + params[3].value) || 0);
                    },
                    textStyle: {
                        align: 'left',
                        textShadowBlur: 10, // 重点
                        textShadowColor: 'transparent', // 重点
                    },
                },
                legend: {
                    align: 'left',
                    itemHeight: 6,
                    itemWidth: 10,
                    show: true,
                    top: 'top'
                },
                title: {
                    subtext: 'mmHg',
                    subtextStyle: {
                        height: 100,
                        lineHeight: 20
                    },
                },
                xAxis: {
                    type: 'category',
                    data: list.map(item => {
                        return item.week
                    })
                },
                yAxis: {
                    type: 'value',
                    nameGap: 10,
                    splitLine: {
                        lineStyle: {
                            type: 'dashed'
                        },
                        show: true
                    }
                },
                series: [{
                        name: null,
                        stack: 'bp',
                        type: 'bar',
                        itemStyle: {
                            borderColor: 'transparent',
                            color: 'transparent',
                        },
                        emphasis: {
                            itemStyle: {
                                borderColor: 'transparent',
                                color: 'transparent'
                            }
                        },
                        data: dbp_min
                    },
                    {
                        name: '舒张压',
                        type: 'bar',
                        stack: 'bp',
                        data: dbp_max,
                        barWidth: 8,
                        itemStyle: {
                            color: 'rgba(120, 205, 69, 1)',
                            borderColor: 'rgba(120, 205, 69, 1)',
                            borderWidth: 2,
                            borderRadius: 20
                        }
                    },
                    {
                        name: null,
                        stack: 'bp',
                        type: 'bar',
                        itemStyle: {
                            borderColor: 'transparent',
                            color: 'transparent'
                        },
                        emphasis: {
                            itemStyle: {
                                borderColor: 'transparent',
                                color: 'transparent'
                            }
                        },
                        data: sbp_min
                    },
                    {
                        name: '收缩压',
                        type: 'bar',
                        stack: 'bp',
                        barWidth: 8,
                        data: sbp_max,
                        itemStyle: {
                            color: 'rgba(50, 149, 247, 1)',
                            borderColor: 'rgba(50, 149, 247, 1)',
                            borderWidth: 2,
                            borderRadius: 20
                        }
                    }
                ]
            }
            let second_config = {
                graphic: {
                    invisible: list.length ? true : false,
                    left: 'center',
                    silent: true,
                    style: {
                        fill: 'black',
                        fontSize: '20px',
                        fontWeight: 'normal',
                        text: '暂无数据'
                    },
                    top: 'middle',
                    type: 'text'
                },
                legend: {
                    align: 'left',
                    itemHeight: 6,
                    itemWidth: 10,
                    show: true,
                    top: 'top'
                },
                grid: {
                    bottom: 10,
                    left: 10,
                    right: 10,
                    top: '20%',
                    show: false,
                    containLabel: true
                },
                tooltip: {
                    show: true,
                    confine: true,
                    trigger: 'axis',
                    formatter: function (params) {
                        return params[0].axisValue + '\n' + params[1].seriesName + '：' + (params[0].value || 0) + '~' + ((params[0].value + params[1].value) || 0);

                    },
                    textStyle: {
                        align: 'left',
                        textShadowBlur: 10, // 重点
                        textShadowColor: 'transparent', // 重点
                    },
                },
                title: {
                    subtext: '次/分钟',
                    subtextStyle: {
                        height: 100,
                        lineHeight: 20
                    },
                },
                xAxis: {
                    type: 'category',
                    data: list.map(item => {
                        return item.week
                    })
                },
                yAxis: {
                    type: 'value',
                    nameGap: 10,
                    splitLine: {
                        lineStyle: {
                            type: 'dashed'
                        },
                        show: true
                    }
                },
                series: [{
                        name: null,
                        stack: 'bar',
                        type: 'bar',
                        itemStyle: {
                            borderColor: 'transparent',
                            color: 'transparent',

                        },
                        emphasis: {
                            itemStyle: {
                                borderColor: 'transparent',
                                color: 'transparent'
                            }
                        },
                        data: pulse_min
                    },
                    {
                        name: '脉搏',
                        type: 'bar',
                        stack: 'bar',
                        data: pulse_max,
                        barWidth: 8,
                        itemStyle: {
                            color: 'rgba(239, 113, 58, 1)',
                            borderColor: 'rgba(239, 113, 58, 1)',
                            borderWidth: 2,
                            borderRadius: 40
                        }
                    }
                ]
            }
            this.setData({
                first_config,
                second_config
            })
        },
        renderMonthChart({
            list
        }) {
            let dbp_min = [], dbp_max = [], sbp_min = [], sbp_max = [], pulse_min = [], pulse_max = [];
            list.forEach(item => {
                item.dbp_min = item.dbp_min || 0;
                item.dbp_max = item.dbp_max || 0;
                item.sbp_min = item.sbp_min || 0;
                item.sbp_max = item.sbp_max || 0;
                item.pulse_min = item.pulse_min || 0;
                item.pulse_max = item.pulse_max || 0;
                dbp_min.push(item.dbp_min);
                dbp_max.push(item.dbp_max - item.dbp_min);
                sbp_min.push(item.sbp_min - item.dbp_max);
                sbp_max.push(item.sbp_max - item.sbp_min);
                pulse_min.push(item.pulse_min);
                pulse_max.push(item.pulse_max - item.pulse_min);
            })
            let first_config = {
                graphic: {
                    invisible: list.length ? true : false,
                    left: 'center',
                    silent: true,
                    style: {
                        fill: 'black',
                        fontSize: '20px',
                        fontWeight: 'normal',
                        text: '暂无数据'
                    },
                    top: 'middle',
                    type: 'text'
                },
                grid: {
                    bottom: 10,
                    left: 10,
                    right: 10,
                    top: '20%',
                    show: false,
                    containLabel: true
                },
                tooltip: {
                    show: true,
                    confine: true,
                    trigger: 'axis',
                    formatter: function (params) {
                        return params[0].axisValue + '\n' + params[1].seriesName + '：' + (params[0].value || 0) + '~' + ((params[0].value + params[1].value) || 0) + '\n' + params[3].seriesName + '：' + ((params[0].value + params[1].value + params[2].value) || 0) + '~' + ((params[0].value + params[1].value + params[2].value + params[3].value) || 0);
                    },
                    textStyle: {
                        align: 'left',
                        textShadowBlur: 10, // 重点
                        textShadowColor: 'transparent', // 重点
                    },
                },
                legend: {
                    align: 'left',
                    itemHeight: 6,
                    itemWidth: 10,
                    show: true,
                    top: 'top'
                },
                title: {
                    subtext: 'mmHg',
                    subtextStyle: {
                        height: 100,
                        lineHeight: 20
                    },
                },
                xAxis: {
                    type: 'category',
                    data: list.map(item => {
                        return item.time
                    })
                },
                yAxis: {
                    type: 'value',
                    nameGap: 10,
                    splitLine: {
                        lineStyle: {
                            type: 'dashed'
                        },
                        show: true
                    }
                },
                series: [{
                        name: null,
                        stack: 'bp',
                        type: 'bar',
                        itemStyle: {
                            borderColor: 'transparent',
                            color: 'transparent',
                        },
                        emphasis: {
                            itemStyle: {
                                borderColor: 'transparent',
                                color: 'transparent'
                            }
                        },
                        data: dbp_min
                    },
                    {
                        name: '舒张压',
                        type: 'bar',
                        stack: 'bp',
                        data: dbp_max,
                        barWidth: 8,
                        itemStyle: {
                            color: 'rgba(120, 205, 69, 1)',
                            borderColor: 'rgba(120, 205, 69, 1)',
                            borderWidth: 2,
                            borderRadius: 20
                        }
                    },
                    {
                        name: null,
                        stack: 'bp',
                        type: 'bar',
                        itemStyle: {
                            borderColor: 'transparent',
                            color: 'transparent'
                        },
                        emphasis: {
                            itemStyle: {
                                borderColor: 'transparent',
                                color: 'transparent'
                            }
                        },
                        data: sbp_min
                    },
                    {
                        name: '收缩压',
                        type: 'bar',
                        stack: 'bp',
                        barWidth: 8,
                        data: sbp_max,
                        itemStyle: {
                            color: 'rgba(50, 149, 247, 1)',
                            borderColor: 'rgba(50, 149, 247, 1)',
                            borderWidth: 2,
                            borderRadius: 20
                        }
                    }
                ]
            }
            let second_config = {
                graphic: {
                    invisible: list.length ? true : false,
                    left: 'center',
                    silent: true,
                    style: {
                        fill: 'black',
                        fontSize: '20px',
                        fontWeight: 'normal',
                        text: '暂无数据'
                    },
                    top: 'middle',
                    type: 'text'
                },
                legend: {
                    align: 'left',
                    itemHeight: 6,
                    itemWidth: 10,
                    show: true,
                    top: 'top'
                },
                grid: {
                    bottom: 10,
                    left: 10,
                    right: 10,
                    top: '20%',
                    show: false,
                    containLabel: true
                },
                tooltip: {
                    show: true,
                    confine: true,
                    trigger: 'axis',
                    formatter: function (params) {
                        return params[0].axisValue + '\n' + params[1].seriesName + '：' + (params[0].value || 0) + '~' + ((params[0].value + params[1].value) || 0);

                    },
                    textStyle: {
                        align: 'left',
                        textShadowBlur: 10, // 重点
                        textShadowColor: 'transparent', // 重点
                    },
                },
                title: {
                    subtext: '次/分钟',
                    subtextStyle: {
                        height: 100,
                        lineHeight: 20
                    },
                },
                xAxis: {
                    type: 'category',
                    data: list.map(item => {
                        return item.time
                    })
                },
                yAxis: {
                    type: 'value',
                    nameGap: 10,
                    splitLine: {
                        lineStyle: {
                            type: 'dashed'
                        },
                        show: true
                    }
                },
                series: [{
                        name: null,
                        stack: 'bar',
                        type: 'bar',
                        itemStyle: {
                            borderColor: 'transparent',
                            color: 'transparent',

                        },
                        emphasis: {
                            itemStyle: {
                                borderColor: 'transparent',
                                color: 'transparent'
                            }
                        },
                        data: pulse_min
                    },
                    {
                        name: '脉搏',
                        type: 'bar',
                        stack: 'bar',
                        data: pulse_max,
                        barWidth: 8,
                        itemStyle: {
                            color: 'rgba(239, 113, 58, 1)',
                            borderColor: 'rgba(239, 113, 58, 1)',
                            borderWidth: 2,
                            borderRadius: 40
                        }
                    }
                ]
            }
            this.setData({
                first_config,
                second_config
            })
        }
    }
})